<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.windControl_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.windControlType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						style="width: 200px"
						@change="getRiskControlList($event)"
						@clear="clearWindControlType()"
					>
						<el-option
							v-for="item in windLevelTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.risk_control_level')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.windControlLevelId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						multiple
						collapse-tags
						:maxlength="10"
						:disabled="selectWindContolType"
						style="width: 260px"
					>
						<el-option
							v-for="item in windControlLevelNameArr"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.createBy')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.createdBy"
						:maxlength="12"
						:placeholder="$t('risk.please_enter_createdBy')"
						v-input="{ name: 'symbols' }"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					class="flex-row-container"
					label-width="77px"
					:label="
						`${$t(
							'funds.proxy_member_funds_record.operation_time'
						)}:`
					"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90060036')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="addLabel($t('common.add'))"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
				@sort-change="_changeTableSort"
			>
				<el-table-column
					align="center"
					type="index"
					:label="`${$t('common.serial_number')}`"
					width="85"
				></el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="windControlType"
					align="center"
					:label="`${$t('risk.windControl_type')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.windControlTypeValue || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="windControlLevelValue"
					align="center"
					:label="`${$t('common.risk_control_level')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.windControlLevelValue || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="objectInfo"
					align="center"
					:label="`${$t('risk.risk_object')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="scope.row.windControlType === 3">
							{{ parseVirtualCurrency(scope.row.objectInfo) }}
						</span>
						<span v-else-if="scope.row.windControlType === 4">
							{{ parseVirtualCurrency(scope.row.objectInfo) }}
						</span>
						<span v-else>
							{{ scope.row.objectInfo || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="windDescription"
					align="center"
					:label="`${$t('risk.risk_object_remark')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.windDescription || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="`${$t('common.last_updateBy')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="`${$t('common.last_updateAt')}`"
					width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="`${$t('common.actions')}`"
					width="240"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('90060038')"
							type="primary"
							icon="el-icon-edit"
							:disabled="loading"
							size="medium"
							@click="edit(scope.row, $t('common.edit'))"
						>
							{{ $t('common.edit') }}
						</el-button>

						<el-button
							v-if="hasPermission('90060037')"
							type="danger"
							icon="el-icon-delete"
							:disabled="loading"
							size="medium"
							@click="deleteLabel(scope.row)"
						>
							{{ $t('common.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			center
			:title="
				title === $t('common.edit')
					? `${$t('risk.edit_risk_object')}`
					: `${$t('risk.add_risk_object')}`
			"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			:width="lists.length > 0 ? '900px' : '640px'"
			class="rempadding"
			@close="clear"
		>
			<el-divider></el-divider>
			<el-form
				ref="formSub"
				:model="dialogForm"
				label-width="auto"
				:rules="rules"
				:validate-on-rule-change="false"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					prop="merchantId"
					v-if="title !== $t('common.edit')"
				>
					<merchant-select
						v-model="dialogForm.merchantId"
						:placeholder="$t('common.components.select_merchant')"
						style="width: 330px"
						:clearable="false"
						@change="changeDisable()"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					prop="merchantId"
					v-if="title === $t('common.edit')"
				>
					<span>
						{{ dialogForm.merchantName }}
					</span>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.windControl_type')}:`"
					prop="windControlType"
					v-if="title !== $t('common.edit')"
				>
					<el-select
						v-model="dialogForm.windControlType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						style="width: 330px"
						@change="getRiskControlList1($event)"
						@clear="clearDialogWindControlList()"
					>
						<el-option
							v-for="item in windLevelTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.windControl_type')}:`"
					prop="windControlType"
					v-if="title === $t('common.edit')"
				>
					<span>
						{{ dialogForm.windControlTypeValue }}
					</span>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.risk_control_level')}:`"
					prop="windControlLevel"
				>
					<el-select
						v-model="dialogForm.windControlLevel"
						size="medium"
						:placeholder="$t('common.all')"
						clearable
						:disabled="dialogWindControlStatus"
						style="width: 330px"
						@change="getWindDescription($event)"
					>
						<el-option
							v-for="item in windControlLevelNameArr1"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.description')}:`"
					prop="windDescription"
				>
					{{ dialogForm.windDescription }}
				</el-form-item>
				<!--会员账号-->
				<el-form-item :label="riskObjTitle" prop="objectInfo" v-if="dialogForm.windDescription !== undefined">
					<span v-if="title !== $t('common.edit')">
						<el-input
							v-model="dialogForm.objectInfo"
							:maxlength="limitNum"
							@input="validateInput()"
							autocomplete="off"
							:style="{
								width:
									title === $t('common.edit') ? '330px' : '247px'
							}"
							:placeholder="$t('common.please_enter')"
							@blur="validateIp(false, dialogForm.objectInfo)"
							clearable
						></el-input>
						<el-button
							type="primary"
							:disabled="loading"
							size="medium"
							class="ml10"
							@click="searchUserName"
						>
							{{ $t('common.search') }}
						</el-button>
					</span>
					<span v-else>{{ dialogForm.objectInfo }}</span>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.risk_object_remark')}:`"
					prop="windControlDescription"
					v-if="dialogForm.windDescription !== undefined"
				>
					<el-input
						v-model="dialogForm.windControlDescription"
						type="textarea"
						style="width: 330px"
						:maxlength="50"
						v-input="{ name: 'noEmpty' }"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subAddOrEdit">
					{{ $t('common.save') }}
				</el-button>
			</div>
			<el-descriptions
				class="risk-desc mb20"
				v-if="lists.length > 0 && title !== $t('common.edit')"
				:title="`${$t('risk.detail_info')}:`"
				style="padding:0px 10px;"
			>
				<el-descriptions-item
					v-for="(item, index) in lists"
					:key="index"
					:label="item.label"
				>
					{{ item.text }}
				</el-descriptions-item>
			</el-descriptions>
			<el-row class="flex-warp-container" v-if="lists.length > 0 && dialogForm.windControlType === '7' && title !== $t('common.edit')">
				<el-row class="pl5 fontStyles">{{ $t('risk.bind_dx_account_history') }}：</el-row>
				<el-col :span="24" class="pt15">
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						:data="accountTableData"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
						:span-method="({ rowIndex, columnIndex }) => objectSpanMethod(rowIndex, columnIndex, accountTableData.length)"
					>
						<el-table-column
							prop="bmhName"
							align="center"
							min-width="100"
							fixed
							:label="
								$t('member.bmh_account')
							"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.bmhName || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="bindNum"
							align="center"
							min-width="130"
							fixed
							:label="
								$t('common.components.add_wallet_count')
							"
							show-overflow-tooltip
						>
							<template>
								<span>
									{{ bindNum || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="bindDxAccountHistory"
							align="center"
							min-width="150"
							fixed
							:label="
								$t('risk.bind_dx_account')
							"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.userName || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="bindStatus"
							align="center"
							min-width="100"
							fixed
							label="当前状态"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="scope.row.operateType === 0">已删除</span>
								<span v-else-if="scope.row.operateType === 1">钱包中</span>
								<span v-else-if="scope.row.operateType === 2">已下架</span>
								<span v-else-if="scope.row.operateType === 3">启用中</span>
								<span v-else-if="scope.row.operateType === 4">禁用中</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="createDt"
							align="center"
							min-width="100"
							fixed
							label="添加/删除时间"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.createDt }}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<el-row class="flex-warp-container" v-if="lists.length > 0 && dialogForm.windControlType === '8' && title !== $t('common.edit')">
				<el-row class="pl5 fontStyles">{{ $t('risk.bind_dx_account_history') }}：</el-row>
				<el-col :span="24" class="pt15">
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						:data="accountTableData"
						style="width: 100%"
						:header-cell-style="getRowClass"
						highlight-current-row
						:span-method="({ rowIndex, columnIndex }) => objectSpanMethod(rowIndex, columnIndex, accountTableData.length)"
					>
						<el-table-column
							prop="bmhName"
							align="center"
							min-width="100"
							fixed
							:label="
								$t('member.yh_account')
							"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.yhName || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="bindNum"
							align="center"
							min-width="130"
							fixed
							:label="
								$t('common.components.add_wallet_count')
							"
							show-overflow-tooltip
						>
							<template>
								<span>
									{{ bindNum || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="bindDxAccountHistory"
							align="center"
							min-width="150"
							fixed
							:label="
								$t('risk.bind_dx_account')
							"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.userName || '-' }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="operateType"
							align="center"
							min-width="100"
							fixed
							label="当前状态"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="scope.row.operateType === 0">已删除</span>
								<span v-else-if="scope.row.operateType === 1">钱包中</span>
								<span v-else-if="scope.row.operateType === 2">已下架</span>
								<span v-else-if="scope.row.operateType === 3">启用中</span>
								<span v-else-if="scope.row.operateType === 4">禁用中</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="createDt"
							align="center"
							min-width="100"
							fixed
							label="添加/删除时间"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.createDt }}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
// import { isHaveEmoji, notSpecial2 } from '@/utils/validate'
import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.riskObjectManage,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		this.reset = this.throttle(this.reset, 1000)
		this._changeTableSort = this.throttle(this._changeTableSort, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			ishaveAccount: false,
			queryData: {
				windControlType: '',
				windControlLevelId: [],
				createdBy: undefined,
				updatedBy: undefined
			},
			searchTime: setSearchTime(),
			tableData: [],
			dialogFormVisible: false,
			windControlLevelNameArr: [],
			windControlLevelNameArr1: [],
			dialogForm: {
				windControlLevel: undefined,
				windControlType: undefined,
				merchantId: undefined,
				windDescription: undefined,
				objectInfo: undefined,
				windControlDescription: undefined
			},
			total: 0,
			title: '',
			lists: [],
			riskObjTitle: '',
			limitNum: '',
			riskIpFlag: false,
			addDisable: false,
			editDisable1: false,
			editDisable2: false,
			selectWindContolType: true,
			dialogWindControlStatus: true,
			loading: false,
			accountTableData: [],
			bindNum: null
		}
	},
	computed: {
		windLevelTypeArr() {
			return this.globalDics.windLevelType || []
		},
		rules() {
			return {
				merchantId: [
					{
						required: true,
						message: this.$t('member.please_select_a_merchant'),
						trigger: 'change'
					}
				],
				windControlType: [
					{
						required: true,
						message: this.$t(
							'member.please_select__risk_control_type'
						),
						trigger: 'change'
					}
				],
				windControlLevel: [
					{
						required: true,
						message: this.$t(
							'member.please_fill_in_the_risk_control_level'
						),
						trigger: 'change'
					}
				],
				objectInfo: [
					{
						required: true,
						message: this.showWarningText(),
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if (
								Number(this.dialogForm.windControlType) === 3 ||
								Number(this.dialogForm.windControlType) === 4
							) {
								if (
									this.title !== this.$t('common.edit') &&
									value.length < 16
								) {
									return callback(
										new Error('输入框长度不能小于16位')
									)
								}
							}
							return callback()
						},
						trigger: ['blur', 'change']
					}
				],
				windControlDescription: [
					{
						required: true,
						message: this.$t(
							'risk.please_input_rish_object_remark'
						),
						trigger: 'change'
					}
				]
			}
		}
	},
	watch: {},
	mounted() {
		// this.getRiskControlList(1)
	},
	methods: {
		objectSpanMethod(rowIndex, columnIndex, len) {
			if (columnIndex === 0 || columnIndex === 1) {
				if (rowIndex % len === 0) {
					return {
						rowspan: len,
						colspan: 1
					}
				}
				return {
					rowspan: 0,
					colspan: 0
				}
			}
		},
		// 获取风控层级描述
		getWindDescription(val) {
			const { windControlLevelDescription } = this.windControlLevelNameArr1?.find(item => item.id == val) || {}
			this.dialogForm.windDescription = windControlLevelDescription
		},
		// 搜索区风控类型删除按钮点击风控层级是否置灰
		clearWindControlType() {
			this.selectWindContolType = true
		},
		// 弹框风控类型删除按钮点击风控层级是否置灰
		clearDialogWindControlList() {
			this.dialogWindControlStatus = true
			this.getRiskControlList1()
			this.riskObjTitle = ''
		},
		changeDisable() {
			this.addDisable = false
			this.editDisable2 = false
			this.getRiskControlList1(this.dialogForm.windControlType)
		},
		searchUserName() {
			if (!this.dialogForm.merchantId) {
				this.$message({
					message: this.$t('member.please_select_merchant'),
					type: 'warning'
				})
				return
			}
			if (!this.dialogForm.windControlType) {
				this.$message({
					message: this.$t('member.please_select__risk_control_type'),
					type: 'warning'
				})
				return
			}
			if (!this.dialogForm.windControlLevel) {
				this.$message({
					message: this.$t('member.select_wind_control_id'),
					type: 'warning'
				})
				return
			}
			if (this.dialogForm.windControlType === '1') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t(
							'funds.capital_adjustment.user_name_placeholder'
						),
						type: 'warning'
					})
					return
				}
			}
			if (this.dialogForm.windControlType === '2') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t(
							'funds.deposit_and_withdraw_config.form_rules_tip24'
						),
						type: 'warning'
					})
					return
				}
			}
			if (this.dialogForm.windControlType === '5') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t('risk.please_enter_ipAddress'),
						type: 'warning'
					})
					return
				}
			}
			if (this.dialogForm.windControlType === '6') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t('member.rule_input_tip_equipmentno'),
						type: 'warning'
					})
					return
				}
			}
			if (this.dialogForm.windControlType === '7') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t('risk.rule_input_tip_bmhText'),
						type: 'warning'
					})
					return
				}
			}
			if (this.dialogForm.windControlType === '8') {
				if (
					!this.dialogForm.objectInfo &&
					this.dialogForm.objectInfo !== 0
				) {
					this.$message({
						message: this.$t('risk.rule_input_tip_yhText'),
						type: 'warning'
					})
					return
				}
			}
			if (this.riskIpFlag) {
				this.$message.closeAll()
				this.validateIp(false, this.dialogForm.objectInfo)
				return
			}
			this.$refs.formSub?.clearValidate()
			this.loading = true
			const params = {
				merchantId: this.dialogForm.merchantId,
				objectInfo: this.dialogForm.objectInfo,
				windControlType: this.dialogForm.windControlType
			}
			const _self = this
			_self.lists = []
			_self.$api
				.riskEditInfoAPI(params)
				.then((res) => {
					setTimeout(() => {
						_self.loading = false
					}, 200)
					this.bindNum = null
					switch (_self.dialogForm.windControlType) {
						case '1':
							_self.lists = [
								{
									label: _self.$t('funds.user_name'),
									text: res?.data[0]?.username
								},
								{
									label: _self.$t('common.components.type'),
									text: this.filterAccount(
										res?.data[0]?.accountType
									)
								},
								// {
								// 	label: _self.$t(
								// 		'common.components.member_name'
								// 	),
								// 	text: res?.data[0]?.realName
								// },
								{
									label: _self.$t(
										'common.components.offline_day'
									),
									text: res?.data[0]?.leaveLineDays
								}
							]
							break
						case '2':
							_self.lists = [
								{
									label: _self.$t('common.agent_number'),
									text: res?.data[0]?.proxyName
								},
								{
									label: _self.$t('common.components.type'),
									text: this.filterAccount(
										res?.data[0]?.accountType
									)
								},
								{
									label: _self.$t(
										'risk.current_risk_member_num'
									),
									text: res?.data[0]?.windControllerProxyCount
								}
							]
							break
						case '5':
							_self.lists = [
								{
									label: _self.$t('risk.register_ip'),
									text: res?.data[0]?.registerIp
								},
								{
									label: _self.$t(
										'common.components.ip_attribution'
									),
									text: res?.data[0]?.ipAttribution
								}
							]
							break
						case '6':
							_self.lists = [
								{
									label: _self.$t('common.components.device'),
									text: res?.data[0]?.deviceNo
								}
							]
							break
						case '4':
							_self.lists = [
								{
									label: '虚拟币地址',
									text: res?.data[0]?.virtualAddress
								},
								{
									label: '虚拟币种类',
									text: res?.data[0]?.virtualKind
								},
								{
									label: '协议类型',
									text: res?.data[0]?.virtualProtocol
								},
								{
									label: '黑名单状态',
									text:
										res?.data[0]?.blackStatus === 0
											? '禁用中'
											: '启用中'
								},
								{
									label: '绑定状态',
									text:
										res?.data[0]?.bindStatus === 0
											? '待绑定'
											: '绑定中'
								},
								{
									label: '绑定账号次数',
									text: res?.data[0]?.bindNum
								},
								{
									label: '总提款金额',
									text: this.handleNumber(
										res?.data[0]?.virtualKind,
										res?.data[0]?.withdrawalTotalAmount || 0
									)
								}
							]
							break
						case '3':
							_self.lists = [
								{
									label: '银行卡号',
									text: res?.data[0]?.cardNumber
								},
								{
									label: '银行名称',
									text: res?.data[0]?.bankName
								},
								{
									label: '黑名单状态',
									text:
										res?.data[0]?.blackStatus === 0
											? '禁用中'
											: '启用中'
								},
								{
									label: '绑定状态',
									text:
										res?.data[0]?.bindStatus === 0
											? '待绑定'
											: '绑定中'
								},
								{
									label: '绑定账号次数',
									text: res?.data[0]?.bindNum
								},
								{
									label: '总提款金额',
									text: this.handleNumber(
										res?.data[0]?.virtualKind,
										res?.data[0]?.withdrawalTotalAmount || 0
									)
								}
							]
							break
						case '7':
							this.accountTableData = res?.data[0]?.bmhRiskAccountRespDTO?.list || []
							this.bindNum = res?.data[0]?.bmhRiskAccountRespDTO?.bindNum
							_self.lists = [
								{
									label: _self.$t('member.bmh_account'),
									text: res?.data[0]?.bmhRiskAccountRespDTO?.bmhName
								},
								{
									label: _self.$t('member.bmh_id'),
									text: res?.data[0]?.bmhRiskAccountRespDTO?.bmhId
								},
								{
									label: _self.$t('common.components.black_status'),
									text: res?.data?.[0]?.bmhRiskAccountRespDTO?.blackListStatus === 0
											? '禁用中'
											: '启用中'
								},
								// {
								// 	label: _self.$t('report.deposit_amount'),
								// 	text: this.handleNumber(
								// 		res?.data[0]?.virtualKind,
								// 		res?.data[0]?.totalDepositAmount || 0
								// 	)
								// },
								{
									label: _self.$t('report.withdraw_amount'),
									text: this.handleNumber(
										res?.data[0]?.bmhRiskAccountRespDTO?.virtualKind,
										res?.data?.[0]?.bmhRiskAccountRespDTO?.withdrawalTotalAmount || 0
									)
								}
							]
							break
						case '8':
							this.accountTableData = res?.data[0]?.yhRiskAccountRespDTO?.list || []
							this.bindNum = res?.data[0]?.yhRiskAccountRespDTO?.bindNum
							_self.lists = [
								{
									label: _self.$t('member.yh_account'),
									text: res?.data[0]?.yhRiskAccountRespDTO?.yhName
								},
								// {
								// 	label: _self.$t('member.yh_account_name'),
								// 	text: res?.data[0]?.yhRiskAccountRespDTO?.yhAccountName
								// },
								{
									label: _self.$t('common.components.black_status'),
									text: res?.data[0]?.yhRiskAccountRespDTO?.blacklistStatus === 0
											? '禁用中'
											: '启用中'
								},
								// {
								// 	label: _self.$t('report.deposit_amount'),
								// 	text: this.handleNumber(
								// 		res?.data[0]?.virtualKind,
								// 		res?.data[0]?.totalDepositAmount || 0
								// 	)
								// },
								{
									label: _self.$t('report.withdraw_amount'),
									text: this.handleNumber(
										res?.data[0]?.yhRiskAccountRespDTO?.virtualKind,
										res?.data[0]?.yhRiskAccountRespDTO?.withdrawalTotalAmount || 0
									)
								}
							]
							break
					}
					this.ishaveAccount = res.code === 200
				})
				.catch(() => {
					this.loading = false
					this.ishaveAccount = false
				})
		},
		showWarningText() {
			if (this.dialogForm.windControlType === '1') {
				return this.$t('funds.capital_adjustment.user_name_placeholder')
			} else if (this.dialogForm.windControlType === '2') {
				return this.$t(
					'funds.deposit_and_withdraw_config.form_rules_tip24'
				)
			} else if (this.dialogForm.windControlType === '5') {
				return this.$t('risk.please_enter_ipAddress')
			} else if (this.dialogForm.windControlType === '6') {
				return this.$t('member.rule_input_tip_equipmentno')
			} else if (this.dialogForm.windControlType === '7') {
				return this.$t('risk.rule_input_tip_bmhText')
			} else if (this.dialogForm.windControlType === '8') {
				return this.$t('risk.rule_input_tip_yhText')
			} else {
				return this.$t('risk.search_input_empty')
			}
		},
		filterAccount(num) {
			let acctType = ''
			switch (num) {
				case 1:
					acctType = this.$t('risk.risk_acct_normal')
					break
				case 2:
					acctType = this.$t('risk.risk_acct_bussiness')
					break
				case 3:
					acctType = this.$t('risk.risk_acct_play')
					break
			}
			return acctType
		},
		riskMemberCount(list) {
			const memberCount = []
			if (list && list.length > 0) {
				list.map((item) => {
					memberCount.push(item.count)
				})
				return memberCount.toString()
			}
		},
		validateIp(rule, value, callback) {
			if (this.dialogForm.windControlType === '5') {
				const regular = /^((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9]))$/
				let arr = []
				if (value && value.includes('，')) {
					let str = ''
					str = value.replace(/，/g, ',')
					arr = str.split(',')
				} else if (value) {
					arr = value.split(',')
				} else {
					this.$t('risk.required')
				}
				if (arr.length > 0) {
					const flag = []
					for (let i = 0; i < arr.length; i++) {
						const ele = arr[i]
						if (ele && !regular.test(ele)) {
							flag.push(i + 1)
						}
					}
					if (flag.length) {
						this.$message({
							type: 'warning',
							message:
								this.$t('risk.format_error') +
								flag.join(this.$t('risk.section')) +
								this.$t('risk.individual')
						})
						this.riskIpFlag = true
					} else {
						this.riskIpFlag = false
					}
				}
			}
		},
		validateInput() {
			if (
				this.dialogForm.windControlType === '1' ||
				this.dialogForm.windControlType === '2' ||
				this.dialogForm.windControlType === '7' ||
				this.dialogForm.windControlType === '8'
			) {
				this.dialogForm.objectInfo = this.dialogForm.objectInfo.replace(
					/[^A-Za-z0-9]/g,
					''
				)
			} else if (this.dialogForm.windControlType === '6') {
				this.dialogForm.objectInfo = this.dialogForm.objectInfo.replace(
					/\s/,
					''
				)
			} else {
				this.dialogForm.objectInfo = this.dialogForm.objectInfo.replace(
					/\s/,
					''
				)
			}
		},
		loadData() {
			this.loading = true
			this.tableData = []
			let params = {
				...this.queryData
			}
			const timeArr = this.searchTime || []
			params = {
				...this.getParams(params),
				updatedAtBegin: dayjs(timeArr[0]).format('YYYY-MM-DD HH:mm:ss'),
				updatedAtEnd: dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss')
			}
			// const idx = params.windControlLevelName.findIndex(
			// 	(item) => item === 'all'
			// )
			// params.windControlLevelName.splice(idx, 1)
			params.windControlLevelName =
				params.windControlLevelName &&
				params.windControlLevelName.length &&
				params.windControlLevelName[0] !== 'all'
					? params.windControlLevelName
					: undefined
			params.createdBy = params.createdBy ? params.createdBy : undefined
			params.updatedBy = params.updatedBy ? params.updatedBy : undefined
			const _self = this
			_self.$api
				.riskObjManageAPI(params)
				.then((res) => {
					_self.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						_self.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						_self.total = totalRecord || 0
					} else {
						_self.$message({
							message:
								res?.msg ||
								_self.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					_self.loading = false
				})

			setTimeout(() => {
				_self.loading = false
			}, 1000)
		},
		reset() {
			this.pageNum = 1
			this.$refs['form'].resetFields()
			this.windControlLevelNameArr = []
			this.searchTime = setSearchTime()
			this.selectWindContolType = true
			this.dialogWindControlStatus = true
			this.riskObjTitle = ''
			this.queryData = {
				windControlType: undefined,
				windControlLevelId: undefined,
				createdBy: undefined,
				updatedBy: undefined
			}
			this.loadData()
		},
		addLabel() {
			this.dialogFormVisible = true
			this.dialogWindControlStatus = true
			this.$refs['form'].resetFields()
			this.title = this.$t('common.add')
			this.lists = []
			if (!this.$store.getters.isZk) {
				this.editDisable1 = false
				this.editDisable2 = false
				this.dialogForm.merchantId = this.$store.getters.merchantInfo.id
				this.dialogForm.windControlType = undefined
				this.dialogForm.windControlLevel = undefined
				this.dialogForm.windDescription = undefined
				this.dialogForm.objectInfo = undefined
				this.dialogForm.windControlDescription = undefined
				this.getRiskControlList1()
			} else {
				this.dialogForm = {
					windControlLevel: undefined,
					windControlType: undefined,
					merchantId: undefined,
					windDescription: undefined,
					objectInfo: undefined,
					windControlDescription: undefined
				}
				this.editDisable1 = false
				this.addDisable = true
				this.editDisable2 = true
				this.getRiskControlList1()
			}
		},
		edit(val) {
			this.dialogWindControlStatus = false
			this.getRiskControlList1(val.windControlType)
			this.title = this.$t('common.edit')
			val.windControlType = val.windControlType + ''
			val.windControlDescription = val.windDescription
			switch (val.windControlType) {
				case '3':
					val.objectInfo = this.parseVirtualCurrency(val.objectInfo)
					break
				case '4':
					val.objectInfo = this.parseVirtualCurrency(val.objectInfo)
					break
			}
			this.dialogForm = { ...val, ...{windDescription: undefined} }
			this.lists = []
			const _self = this
			switch (_self.dialogForm.windControlType) {
				case '1':
					_self.lists = [
						{
							label: _self.$t('funds.user_name'),
							text: val?.username
						},
						{
							label: _self.$t('common.components.type'),
							text: this.filterAccount(val?.accountType)
						},
						// {
						// 	label: _self.$t('common.components.member_name'),
						// 	text: val?.realName
						// },
						{
							label: _self.$t('common.components.offline_day'),
							text: val?.leaveLineDays
						}
					]
					break
				case '2':
					_self.lists = [
						{
							label: _self.$t('common.agent_number'),
							text: val?.proxyName
						},
						{
							label: _self.$t('common.components.type'),
							text: this.filterAccount(val?.accountType)
						},
						{
							label: _self.$t('risk.current_risk_member_num'),
							text: val?.windControllerProxyCount
						}
					]
					break
				case '5':
					_self.lists = [
						{
							label: _self.$t('risk.register_ip'),
							text: val?.registerIp
						},
						{
							label: _self.$t('common.components.ip_attribution'),
							text: val?.ipAttribution
						}
					]
					break
				case '6':
					_self.lists = [
						{
							label: _self.$t('common.components.device'),
							text: val?.deviceNo
						}
					]
					break
				case '7':
					_self.lists = [
						{
							label: _self.$t('member.bmh_account'),
							text: val?.bmhName
						},
						{
							label: _self.$t('member.bmh_id'),
							text: val?.bmhId
						},
						{
							label: _self.$t('common.black_status'),
							text: val?.blackStatus === 0 ? '禁用中' : '启用中'
						},
						{
							label: _self.$t('report.deposit_amount'),
							text: this.handleNumber(
									val?.virtualKind,
									val?.totalDepositAmount || 0
								)
						},
						{
							label: _self.$t('report.withdraw_amount'),
							text: this.handleNumber(
									val?.virtualKind,
									val?.totalWithdrawAmount || 0
								)
						}
					]
					break
				case '8':
					_self.lists = [
						{
							label: _self.$t('member.yh_account'),
							text: val?.yhName
						},
						{
							label: _self.$t('member.yh_account_name'),
							text: val?.yhAccountName
						},
						{
							label: _self.$t('common.black_status'),
							text: val?.blackStatus === 0 ? '禁用中' : '启用中'
						},
						{
							label: _self.$t('report.deposit_amount'),
							text: this.handleNumber(
									val?.virtualKind,
									val?.totalDepositAmount || 0
								)
						},
						{
							label: _self.$t('report.withdraw_amount'),
							text: this.handleNumber(
									val?.virtualKind,
									val?.totalWithdrawAmount || 0
								)
						}
					]
					break
			}
			this.addDisable = false
			this.editDisable1 = true
			this.editDisable2 = true
			this.dialogFormVisible = true
		},
		deleteLabel(val) {
			const { id } = val
			this.$confirm(
				`<strong>${this.$t(
					'risk.is_del_risk_level_tip'
				)}</strong><br/><strong style="color:#D9001B">${this.$t(
					'risk.del_risk_level_warning'
				)}</strong>`,
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})

					this.$api
						.riskObjManageDelAPI(id)
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.delete_success')
								)
								this.loadData()
							} else {
								this.$message({
									type: 'error',
									message: this.$t('common.delete_fail')
								})
							}
						})
						.catch(() => {
							loading.close()
						})
					setTimeout(() => {
						loading.close()
					}, 1000)
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			const params = {
				...this.dialogForm
			}
			params.userName = this.dialogForm.objectInfo
			const handleClick =
				this.title !== this.$t('common.edit')
					? this.$api.riskObjManageAddAPI
					: this.$api.riskObjManageEditAPI
			this.$refs.formSub.validate((valid) => {
				if (
					this.title !== this.$t('common.edit') &&
					this.dialogForm.windControlType === '5'
				) {
					if (this.riskIpFlag) {
						this.$message.closeAll()
						this.validateIp(false, this.dialogForm.objectInfo)
						return
					}
				}
				if (valid) {
					// if (
					// 	!this.ishaveAccount &&
					// 	this.title !== this.$t('common.edit')
					// ) {
					// 	setTimeout(() => {
					// 		this.$message({
					// 			message: `${this.riskObjTitle}查询无果`,
					// 			type: 'error'
					// 		})
					// 	}, 100)
					// 	return
					// }
					handleClick(params)
						.then((res) => {
							const { code, msg } = res
							if (code === 200) {
								this.$message({
									message: `${
										this.title !== this.$t('common.edit')
											? this.$t('common.add_success')
											: this.$t('common.edit_success')
									}`,
									type: 'success'
								})
								this.loadData()
							} else {
								this.$message({
									message: msg,
									type: 'error'
								})
							}
							this.dialogFormVisible = false
						})
						.catch((err) => {
							this.$message.closeAll()
							const msg = err
								? err.toString().replace('Error: ', '')
								: ''
							setTimeout(() => {
								this.$message({
									message:
										err?.msg ||
										msg.replace('Error', '') ||
										'保存失败',
									type: 'error'
								})
							}, 100)
						})
				}
			})
		},
		clear() {
			this.dialogForm = {
				windControlLevel: undefined,
				windControlType: undefined,
				merchantId: undefined,
				windDescription: undefined,
				objectInfo: undefined,
				windControlDescription: undefined
			}
			this.selectWindContolType = true
			this.dialogWindControlStatus = true
		},
		// 获取新增编辑风控层级
		getRiskControlList1(val) {
			this.dialogForm.windDescription = undefined
			if (val !== undefined) {
				this.dialogWindControlStatus = false
			} else {
				this.dialogWindControlStatus = true
			}
			this.limitNum = ''
			switch (String(val)) {
				case '1':
					this.riskObjTitle = this.$t('common.member_number')
					this.limitNum = '11'
					break
				case '2':
					this.riskObjTitle = this.$t('risk.risk_proxy')
					this.limitNum = '11'
					break
				case '5':
					this.riskObjTitle = this.$t('risk.risk_ip')
					break
				case '6':
					this.riskObjTitle = this.$t('risk.risk_device')
					this.limitNum = '50'
					break
				case '3':
					this.riskObjTitle = '银行卡号'
					this.limitNum = '50'
					break
				case '4':
					this.riskObjTitle = '虚拟币地址'
					this.limitNum = '50'
					break
				case '7':
					this.riskObjTitle = this.$t('member.bmh_account')
					this.limitNum = '11'
					break
				case '8':
					this.riskObjTitle = this.$t('member.yh_account')
					this.limitNum = '11'
					break
			}
			this.$set(this.dialogForm, 'windControlType', val)
			this.dialogForm.windControlLevel = undefined
			this.windControlLevelNameArr1 = []
			if (val) {
				this.$api
					.getSelectWindControlLevel({
						merchantId: this.dialogForm.merchantId,
						windControlType: val * 1
					})
					.then((res) => {
						const { code, data, msg } = res || {}
						if (code === 200) {
							this.windControlLevelNameArr1 = data || []
							this.getWindDescription(this.dialogForm.windControlLevel)
						} else {
							this.$message({
								message: msg,
								type: 'error'
							})
						}
					})
			}
		},
		// 获取风控层级
		getRiskControlList(val) {
			if (this.queryData.windControlType !== undefined) {
				this.selectWindContolType = false
			} else {
				this.selectWindContolType = true
			}
			this.queryData.windControlLevelId = []
			this.windControlLevelNameArr = []
			this.$api
				.getSelectWindControlLevel({
					merchantId: this.queryData.merchantId,
					windControlType: val * 1
				})
				.then((res) => {
					const { code, data, msg } = res || {}
					if (code === 200) {
						this.windControlLevelNameArr = data || []
					} else {
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
		},
		parseBankCard: function(str) {
			if (!str && str !== 0) {
				return '-'
			} else {
				const arr = []
				const nameStr = str.substring(4, str.length - 3)
				for (const item in [...nameStr]) {
					arr[item] = [...nameStr][item].replace(
						[...nameStr][item],
						'*'
					)
				}
				const replaceStr = arr.join('')
				const firstStr = str.substring(0, 4)
				const secondStr = str.substring(str.length - 4, str.length)
				str = `${firstStr}${replaceStr}${secondStr}`
				return str
			}
		},
		parseVirtualCurrency: function(str) {
			if (!str && str !== 0) {
				return '-'
			} else {
				const replaceStr = '****'
				const firstStr = str.substring(0, 4)
				const secondStr = str.substring(str.length, str.length - 4)
				str = `${firstStr}${replaceStr}${secondStr}`
				return str
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .risk-desc .el-descriptions-item__label {
	white-space: nowrap;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.bodyBox {
	max-height: 400px;
	overflow: auto;
}
p {
	display: flex;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #e8e8e8;
	justify-content: space-around;
	span {
		display: inline-block;
		width: 50%;
		text-align: center;
	}
}
.headerBox {
	color: #000000d8;
	background: #fafafa;
	font-family: 'PingFang SC ', 'PingFang SC', sans-serif;
	font-weight: 650;
	border-top: 1px solid #e8e8e8;
	margin-top: 15px;
}
.wd480{
	width: 480px;
}
.fontStyles{
	text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 10px;
    box-sizing: border-box;
	font-weight: 700;
	white-space: nowrap;
}
</style>
